<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

		<title>TDrive Web3 网盘体验</title>
		<style>
			/* Reset and general styles */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: Arial, sans-serif;
			}

			html,
			body {
				touch-action: pan-x pan-y;
				/* 禁止缩放 */
				overscroll-behavior: contain;
				/* 禁止页面溢出 */
			}

			body {

				height: 100vh;
				/* 使 body 高度填充视口 */
				margin: 0;
				/* 去掉默认 margin */
			}

			body {
				background-color: #141414;
				color: #ffffff;
				padding: 0px;
			}

			/* Main container */
			.container {
				position: relative;
				margin: 0 auto;
				text-align: center;
				color: #ffffff;
				overflow: hidden;
			}

			/* Background image */
			.container img.bg-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: auto;
				object-fit: cover;
				z-index: 999991;
				pointer-events: none;
				/* 允许点击事件穿透 */

			}


			/* Header styles */
			.header {
				width: 135px;
				font-family: 'Futura-Bold', Futura, sans-serif;
				font-weight: 400;
				font-size: 36px;
				margin-top: 70px;
				margin-left: 18px;
				color: #E2F179;
				letter-spacing: 3px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.header-icon {
				width: 30px;
				height: 30px;
				top: 60px;
				right: 17px;
				position: absolute;
			}

			.subheader {
				width: 230px;
				font-family: 'PingFang SC', PingFang, sans-serif;
				font-weight: 600;
				margin-left: 18px;
				font-size: 12px;
				color: #FFFFFF;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			/* Main image with overlay */
			.image-container {
				position: relative;
				margin: 0 auto;
				width: 288px;
				height: 180px;
				background-color: #333;
				border-radius: 10px;
				overflow: hidden;
			}

			.image-container img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.image-section {
				width: 90%;
				margin: 0 auto;
				margin-top: 20px;
				background-image: url('./assets/image-section.png');
				background-position: center;
				padding: 20px 18px;
				border-radius: 15px;
				color: #ffffff;
			}


			.image-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 14px;
			}

			.play-icon {
				width: 24px;
				height: 24px;
			}

			.subheader-demo {
				width: 250px;
				margin: 0 auto;
				margin-top: 20px;
				font-family: 'PingFang SC', PingFang, sans-serif;
				font-weight: 600;
				font-size: 15px;
				color: #FFFFFF;
				line-height: 19px;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.subheader-demo2 {
				margin: 0 auto;

				margin-top: 6px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #E2F179;
				line-height: 15px;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			/* Button styles */
			.button {
				width: 311px;
				height: 48px;
				background-color: #E2F179;
				border-radius: 12px;
				color: #000000;
				font-weight: bold;
				font-size: 16px;
				/* display: flex; */
				align-items: center;
				justify-content: center;
				padding: 0 20px;
				cursor: pointer;
				border: none;
				margin-top: 20px;
			}

			.button img {
				width: 20px;
				height: 20px;
			}

			/* Additional info text */
			.info-text {
				margin: 0 auto;
				margin-top: 20px;
				width: 309px;
				border-radius: 18px;
				border: 1px solid rgba(226, 241, 121, 0.5);
				background-color: #141414;
				color: #FFFFFF;
				padding: 10px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 10px;
				color: rgba(255, 255, 255, 0.6);
				line-height: 17px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			/* Footer button */
			.footer-button {
				width: 343px;
				height: 48px;
				background: #E2F179;
				border-radius: 12px;
				margin: 0 auto;
				font-family: 'PingFang SC', sans-serif;
				font-weight: 500;
				font-size: 16px;
				color: #000000;
				line-height: 21px;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20px;
				margin-bottom: 1.25rem;
				cursor: pointer;
				border: none;
			}

			.investment-partnership {
				font-family: 'PingFang SC', sans-serif;
				font-weight: 600;
				font-size: 16px;
				color: #E2F179;
				line-height: 19px;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 1.125rem;
				margin-top: 1.25rem;
			}

			.tdrive-prospect {
				width: 100%;
				height: 17px;
				margin-left: 1.125rem;
				margin-top: 0.375rem;
				font-family: 'PingFang SC', sans-serif;
				font-weight: 500;
				font-size: 12px;
				color: #FFFFFF;
				line-height: 14px;
				text-align: left;
				font-style: normal;
				text-transform: none;

			}

			.responsive-video {
				width: 100%;
				/* 视频占满容器宽度 */
				height: 180px;
				/* 自动适应高度 */
				object-fit: cover;
				/* 根据容器裁剪视频 */
			}
		</style>

	</head>

	<body>

		<div class="container">
			<!-- Background image element -->
			<img src="./assets/background-image.png" class="bg-image">

			<!-- Header Section -->
			<div class="header" id="header-text">TDrive</div>
			<img src="./assets/en.png" onclick="onLanguageToggle()" alt="icon" id="language-icon" class="header-icon">
			<div class="subheader" id="subheader">真正的去中心化网盘首次体验开始</div>


			<div class="image-section">
				<div class="image-container" onclick="togglePlayPause()">
					<video  poster="./assets/masebac.png" id="myVideo" class="responsive-video"  playsinline webkit-playsinline loop>
						<source src="https://dev.t-drive.io/api/v1/user/share/resource/e6bd3103-f91e-4a23-9e51-2e9737f011ca"
							type="video/mp4">
						Your browser does not support the video tag.
					</video>
					<div class="image-overlay" id="imageOverlay">点击观看演示</div>
					<img src="./assets/play.png" id="playPauseIcon"
						style="z-index: 999999; width: 20px; height: 20px; position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);"
						class="overlay-icon">
				</div>

				<!-- Description Text -->
				<p class="subheader-demo" id="subTxt1">抢先体验真正的 Web3 网盘，并获得空投 (airdrop)</p>
				<p class="subheader-demo2" id="subTxt2">300万积分仅限SFF现场体验获得</p>

				<!-- Main Action Button -->
				<button class="button" onclick="openTelegramLink()">
					<p id="btn2" style="float: left;">已安装 Telegram，抢先体验</p>
					<img src="./assets/icon.png" alt="arrow">
				</button>

				<!-- Additional Info Text -->
				<div class="info-text" id="info">
					还没安装 Telegram？请前往 TDrive 仅支持 telegram入口。需要先安装 TG 并验证手机，然后在下方下载 Web3 网盘。点击 TDrive 邀请码进入体验步骤，立即下载
					Telegram，为
					airdrop 提供独特机会。
				</div>
			</div>


			<div class="investment-partnership" id="partnership">投资合作</div>
			<div class="tdrive-prospect" id=prospect>看好TDrive的发展前景？欢迎您以各种形式参与共建。</div>

			<!-- Footer Button -->
			<button class="footer-button" id="btn3" onclick="openContact()">留下联系方式</button>
		</div>

		<script>
			let currentLang = 'zh'; // 默认语言为中文

			const translations = {
				zh: {
					header: "TDrive",
					subheader: "真正的去中心化网盘首次体验开始",
					btnPlay: "点击观看演示",
					airdrop: "抢先体验真正的 Web3 网盘，并获得空投 (airdrop)",
					reword: "300万积分仅限SFF现场体验获得",
					tgapp: "已安装Telegram，抢先体验",
					nottgapp: "还没安装 Telegram？请前往 TDrive 仅支持 telegram入口。需要先安装 TG 并验证手机，然后在下方下载 Web3 网盘。点击 TDrive 邀请码进入体验步骤，立即下载 Telegram，为 airdrop 提供独特机会。",
					investmentPartnership: "投资合作",
					prospect: "看好TDrive的发展前景？欢迎您以各种形式参与共建。",
					contact: "留下联系方式",
					iconSrc: "./assets/en.png",
					palyState: "播放",
					palyState1: "暂停"
				},
				en: {
					header: "TDrive",
					subheader: "Experience true decentralized cloud storage",
					btnPlay: "Watch demo",
					airdrop: "Be the first to experience Web3 cloud storage and get airdrops",
					reword: "3 million points available only on-site",
					tgapp: "Telegram installed, start now",
					nottgapp: "Haven't installed Telegram? Install and verify to download the Web3 cloud storage.",
					investmentPartnership: "Investment Cooperation",
					prospect: "Interested in TDrive's future? Join us in building it.",
					contact: "Leave your contact info",
					iconSrc: "./assets/zh.png",
					palyState: "play",
					palyState1: "pause"
				}
			};


			function onLanguageToggle() {
				currentLang = currentLang === 'zh' ? 'en' : 'zh'; // 切换语言
				localStorage.setItem('currentLang', currentLang); // 将当前语言存入 localStorage
				updateText();

			}

			function updateText() {
				document.getElementById('header-text').innerText = translations[currentLang].header;
				document.getElementById('subheader').innerText = translations[currentLang].subheader;
				document.querySelector('.image-overlay').innerText = translations[currentLang].btnPlay; // 示例更新
				document.getElementById('subTxt1').innerText = translations[currentLang].airdrop;
				document.getElementById('subTxt2').innerText = translations[currentLang].reword;
				document.getElementById('btn2').innerText = translations[currentLang].tgapp;
				document.getElementById('info').innerText = translations[currentLang].nottgapp;
				document.getElementById('partnership').innerText = translations[currentLang].investmentPartnership;
				document.getElementById('prospect').innerText = translations[currentLang].prospect;
				document.getElementById('btn3').innerText = translations[currentLang].contact;
				document.getElementById('language-icon').src = translations[currentLang].iconSrc;
			}

			function togglePlayPause() {
				const video = document.getElementById('myVideo');
				const overlayIcon = document.getElementById('playPauseIcon');
				const imageOverlay = document.getElementById('imageOverlay');

				if (video.paused || video.ended) {
					// 如果视频暂停或已结束，开始播放
					video.play();
					overlayIcon.src = "./assets/pause.png";
					imageOverlay.innerText = translations[currentLang].palyState1;
					setTimeout(() => {
						imageOverlay.style.visibility = "hidden"
						overlayIcon.style.visibility = "hidden"
					}, 1000); // 
				} else {
					// 如果视频正在播放，暂停播放
					video.pause();
					overlayIcon.src = "./assets/play.png";
					imageOverlay.innerText = translations[currentLang].palyState;
					imageOverlay.style.visibility = 'visible';
					overlayIcon.style.visibility = 'visible';

				}
			}

			function openTelegramLink() {
				const url = "https://t.me/DevTdriver_bot/Tdriver?startapp=guideIntegral";
				window.open(url, '_blank');
			}

			function openContact() {
				const url =
					"https://docs.google.com/forms/d/e/1FAIpQLSfUAf9Ap2UmuCWBtvRKx2-mt86ErGXu6vFXFtCDTgsQbfw0vg/viewform?usp=sf_link";
				window.open(url, '_blank'); // '_blank' 在新标签页打开链接
			}
			window.onload = function() {
				const storedLang = localStorage.getItem('currentLang');
				if (storedLang) {
					currentLang = storedLang; // 使用存储的语言
				}
				updateText();
			};
		</script>
	</body>

</html>